<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Checkboxes styled</title>
    <style>
      input[type="checkbox"] {
        appearance: none;
      }

      input[type="checkbox"] {
        position: relative;
        width: 1em;
        height: 1em;
        border: 1px solid gray;
        /* Adjusts the position of the checkboxes on the text baseline */
        vertical-align: -2px;
        /* Set here so that Windows' High-Contrast Mode can override */
        color: green;
      }

      input[type="checkbox"]::before {
        content: "✔";
        position: absolute;
        font-size: 1.2em;
        right: 0;
        top: -0.3em;
        visibility: hidden;
      }

      input[type="checkbox"]:checked::before {
        /* Use `visibility` instead of `display` to avoid recalculating layout */
        visibility: visible;
      }

      input[type="checkbox"]:disabled {
        border-color: black;
        background: #ddd;
        color: gray;
      }

    </style>
  </head>

<body>
  <form>
    <fieldset>
      <legend>Fruit preferences</legend>

      <p>
        <label>
          <input type="checkbox" name="fruit" value="cherry">
          I like cherry
        </label>
      </p>
      <p>
        <label>
          <input type="checkbox" name="fruit" value="banana" disabled>
          I can't like banana
        </label>
      </p>
      <p>
        <label>
          <input type="checkbox" name="fruit" value="strawberry">
          I like strawberry
        </label>
      </p>
    </fieldset>
  </form>
</body>

</html>
